<template>
	<view>
		<!-- <u-navbar :is-back='false' :border-bottom='false' title='签到领积分' title-color='#ffffff' :is-fixed='true'
			:background='background'>
			<view class="slot-wrap">
				<view @click="back"
					style="border-radius: 50%;width: 50rpx;height: 50rpx;background-color:rgba(0,0,0,.2);position: relative;">
					<text class="iconfont icon-xiangzuo"
						style="font-size: 40rpx;color: #FFFFFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"></text>
				</view>
		
			</view>
		</u-navbar> -->
		<view style="position: relative;">
			<!-- <image src="../../static/qiandao.png" style="width: 100%;" mode=""></image> -->
			<text style="position: absolute;top: 30rpx;left: 50%;transform: translateX(-50%);">
				<text style="color: #FFFFFF;font-size: 72rpx;">{{fen}}</text><text style="color: #FFFFFF;font-size: 30rpx;">积分</text>
			</text>
			<view v-if="shi.is_sign==1" style="width: 220rpx;height:80rpx;line-height: 80rpx;border-radius: 40rpx;font-size: 30rpx;color: #FFFFFF;position: absolute;top: 150rpx;left: 50%;transform: translateX(-50%);text-align: center;background-color: #F0AD4E;">
				已签到
			</view>
			<view v-if="shi.is_sign==0" @click="djqd" style="width: 220rpx;height:80rpx;line-height: 76rpx;border-radius: 40rpx;border: 1px solid #FFFFFF;font-size: 30rpx;color: #FFFFFF;position: absolute;top: 150rpx;left: 50%;transform: translateX(-50%);text-align: center;">
				签到
			</view>
			<view style="font-size: 30rpx;color: #FFFFFF;position: absolute;top: 260rpx;left: 50%;transform: translateX(-50%);text-align: center;width: 100%;">
				已连续签到{{shi.sign_num || 0}}天，继续加油！
			</view>
			<view style="width: 92%;position: absolute;top: 350rpx;left: 4%;padding: 30rpx;border-radius: 20rpx;background-color: #FFFFFF;box-sizing: border-box;">
				<ren-calendar ref='ren' :markDays='markDays' :open="true" :disabledAfter='true' ></ren-calendar>
			</view>
		</view>
		
		
		<view @click="qian" style="width: 146rpx;height: 54rpx;line-height: 54rpx;background-color: rgba(0,0,0,.5);text-align: center;color: #F5F5F5;font-size: 24rpx;border-radius: 27rpx 0 0 27rpx;position: fixed;top:240rpx;right: 0;">
			签到规则
		</view>
		<!-- <view @click="jilu" style="width: 146rpx;height: 54rpx;line-height: 54rpx;background-color: rgba(0,0,0,.5);text-align: center;color: #F5F5F5;font-size: 24rpx;border-radius: 27rpx 0 0 27rpx;position: fixed;top: 320rpx;right: 0;">
			积分记录
		</view> -->
		
		
		<uni-popup id="popup" ref="popup" :type="type" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx;border-radius: 20upx;width: 500rpx;">
				<view style="text-align: center;height: 100upx;line-height: 100upx;color: #333333;font-weight: 600;font-size: 32rpx;">
					签到规则
				</view>
				<scroll-view scroll-y="true" style="height: 400rpx;margin-bottom: 20rpx;">
					<view style="line-height: 50rpx;color: #606266;font-size: 24rpx;" v-html="rule">
						<!-- <RichText :nodes="rule" /> -->
						
					</view>
				</scroll-view>
				<view @click="guan" style="width: 100%;height: 80rpx;line-height: 80rpx;background-color: #1fb0ac;border-radius: 40rpx;color: #FFFFFF;font-size: 30rpx;text-align: center;">
					确定
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popup1" :type="type" :animation="true">
			<view class="" style="background-color: #FFFFFF;border-radius: 20upx;width: 500rpx;height: 600rpx;position: relative;">
				<image src="https://frozen-info.oss-cn-shanghai.aliyuncs.com/uploads/20210910/60bc3381cf7114b751ad6465d7e56200.png" style="width: 500rpx;height: 600rpx;display: block;border-radius: 20upx;position: absolute;top: 0;left: 0;" mode=""></image>
				<view style="color: #FFFFFF;font-size: 84rpx;position: absolute;top:50rpx;left: 30rpx;">
					签到成功
				</view>
				<view style="color: #FFFFFF;font-size: 26rpx;position: absolute;top:180rpx;left: 30rpx;">
					已连续签到{{shi.sign_num || 0}}天
				</view>
				<view @click="haode" style="width:400rpx;height: 80rpx;line-height: 80rpx;border-radius: 40rpx;text-align: center;background-color: #FFFFFF;color: #1fb0ac;font-size: 30rpx;position: absolute;left: 50%;bottom: 50rpx;transform: translateX(-50%);">
					好的
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	export default {
	    components:{
	        RenCalendar
	    },
		data(){
			return{
				background: {
					background: 'linear-gradient(180deg, #0078FF 0%, #1278F5 100%)'
				},
				curDate:'',
				markDays:[],
				type:'center',
				fen:'',
				rule:'',
				shi:{}
			}
		},
		// onReady() {
		//     let today = this.$refs.ren.getToday().date;
		//     this.curDate = today;
		//     this.markDays.push(today);
		// 	this.qiandao()
		// },
		onPullDownRefresh() {
			this.qiandao()
		  },
		onShow() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
			this.qiandao()
			this.user_xx()
			this.shifou()
		},
		methods:{
			// 增加访问量
			yang:function(){
				this.post('api/homepage/pageviews',{path:'/pages/my/qiandao'},true).then(res=>{
					console.log(res)
				})
			},
			// 判断今天是否签到
			shifou:function(){
				this.post('api/signing/get_sign_info','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.shi=res.data
					}
				})	
			},
			user_xx:function(){
				this.post('api/client/info','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.fen=res.data.score
					}
				})
			},
			back:function(){
				uni.navigateBack({
					delta:1
				})
			},
			qian:function(){
				this.$refs.popup.open()
			},
			guan:function(){
				this.$refs.popup.close()
				this.$forceUpdate()
			},
			djqd:function(){
				this.post('api/signing/do_sign','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.$refs.popup1.open()
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
				
			},
			haode:function(){
				this.user_xx()
				this.shifou()
				this.$refs.popup1.close()
				this.$forceUpdate()
				uni.redirectTo({
					url:'/sub/pages/my/qiandao'
				})
			},
			// 浅到规则
			qiandao:function(){
				this.post('api/signing/get_sign_info','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.rule=res.data.sign_rule
						          // .replace(/<img/gi,   '<img class="rich-img" ')
						          //                                         .replace(/<p/g, '<div')
						          //                                         .replace(/\/p>/g, '\div>');
					}
				})
			},
			jilu:function(){
				uni.navigateTo({
					url:'jfmx'
				})
			}
		}
	}
</script>

<style lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}
	
	page {
		background-color: #f5f5f5 !important;
		font-family: Demibold;
	}
</style>
